<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="../common/adminContentHead.jsp" />
<link href="${pageContext.request.contextPath}/css/zTreeStyle/metroStyle/metroStyle.css?v=<%=getServletContext().getAttribute("version") %>" rel="stylesheet">
<title>课程设计管理系统</title>
<style>
.list-group-item {
	padding: 5px 5px;
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus
	{
	z-index: 2;
	color: #131212;
	background-color: #ffffff;
	border-color: #f5f5f5;
}
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>
</head>    
<body>   
<div class="row">
	<div class="col-md-3">
		<div class="panel panel-default">
				<div class="panel-heading">我的程设计</div>
				<div class="panel-body hfit" style="height: 600px;overflow-y: auto;">
					<div class="list-group" id="div_rolelist_fqj">
						<p class="list-group-item active" >名称：${myCourses.courses}</p>
						<p class="list-group-item active" >分数：${myCourses.score}</p>
						<p class="list-group-item active" >指导老师：${myCourses.teacher}</p>
						<input type="hidden" id="gid" value="${myCourses.groupId}">
						<input type="hidden" id="gmid" value="${myCourses.gmid}">
						<p class="list-group-item active" >截至日期：<fmt:formatDate pattern="yyyy-MM-dd" value="${myCourses.finishDate}" /></p>
						<p class="list-group-item active" >任务：
							<textarea class="form-control" rows="5" cols="40" readonly="readonly">${myCourses.task}</textarea>
						</p>
						<p class="list-group-item active" >相关文件：</p>
						<c:forEach items="${myCourses.files}" var="file">
							<p  class="list-group-item active" >　　　　　   <a href="${pageContext.request.contextPath}/${file.url}">${file.name}</a> </p>
						</c:forEach>
						<p class="list-group-item active" >上传文件</p>
						
						<!-- <p class="list-group-item active" >　　　　　　备注： <input type="text" class="fileRemarks" ></p> -->
						<p class="list-group-item active" >备注：
							<textarea class="form-control" rows="5" cols="40"  class="fileRemarks" ></textarea>
						</p>
						
						<p class="list-group-item active" >
							<a href="javascript:;" class="file">选择文件  <input type="file" id="fileContainer"> </a> 
							<button type="button" class="btn btn-default btn-sm upload" style="margin-bottom: 20px;" >上传</button>
						</p>
						<c:forEach items="${progressAcces}" var="file">
							<p  class="list-group-item active" >
							备注：${file.remark}
							<a href="${pageContext.request.contextPath}/${file.fUrl}">${file.fName}</a><button class="btn btn-default btn-sm" onclick="deleteAcce(${file.id})">删除</button>
							 日期：<fmt:formatDate pattern="yyyy-MM-dd" value="${file.creatTime}" />
							 </p>
						</c:forEach>
						
					</div>
				</div>
		</div>
		
	</div>
	<div class="col-md-9">
		<div class="panel panel-default">
			<div class="panel-heading">我的进度记录<button type="button" class="btn btn-success btn-sm addRe"   style="float: right;margin-top: -5px;">新增记录</button></div>
			<div class="panel-body hfit" style="overflow-x:auto;" id="reDiv">
				<c:forEach items="${progress}" var="pro">
					<div class="form-inline  col-md-12">
						 <div class="form-group" style="margin-bottom:-5%;">
						    <label >进度：</label>
						    <input type="number" class="form-control pro" style="width: 60px;" value="${pro.pro}">
						  </div>
						  <div class="form-group">
						    <label >说明：</label>
						    <textarea rows="5" cols="20"  class="form-control explains" >${pro.explains}</textarea>
						  </div>
						  <div class="form-group">
						    <label >点评：</label>
						    <textarea rows="5" cols="20" readonly="readonly"  class="form-control" >${pro.comments}</textarea>
						  </div>
						  <div class="form-group" style="margin-bottom:-5%;">
						   	 <label >填写日期：</label>
						    	<fmt:formatDate pattern="yyyy-MM-dd" value="${pro.creatTime}" />
						  </div>
						  <div class="form-group button"  style="margin-bottom:-5%;">
						  		 <input type="hidden" class="form-control id" value="${pro.id}">
								<button type="button" class="btn btn-danger delete"   style="margin-left: 5px;">删除</button>
						  </div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>	
</div>	
<script src="${pageContext.request.contextPath}/sb-admin-2-1.0.8/bower_components/jquery/dist/jquery.min.js?v=<%=getServletContext().getAttribute("version") %>"></script>
<script type="text/javascript">
	$(function(){
		 var divheight=$(window).height();//初始化修改div的高度
		 divheight=divheight-65;
		 $(".panel-body").css({height:divheight});
	});
	
	var html='<div class="form-inline col-md-12"> <div class="form-group" style="margin-bottom:-5%;"> <label>进度：</label> <input type="number" style="width: 60px;" class="form-control pro"> </div> <div class="form-group"> <label>说明：</label> <textarea rows="5" cols="20" class="form-control explains"> </textarea> </div> <div class="form-group"> <label>点评：</label> <textarea rows="5" cols="20" readonly="readonly" class="form-control"> </textarea> </div> <div class="form-group" style="margin-bottom:-5%;"> <label>填写日期：</label> </div> <div class="form-group button" style="margin-bottom:-5%;"> <input type="hidden" class="form-control id"> <button type="button" class="btn btn-danger delete" style="margin-left: 5px;">删除</button> <button type="button" class="btn btn-success add" style="margin-left: 5px;">保存</button> </div> </div>';
	$('.addRe').click(function(){
		$('#reDiv').append(html);
	});
	 
	$('#reDiv').on('click','.btn',function(){
		var obj=$(this);
		var type=$(this).hasClass('add');
		if(type){
			var datas={};
			datas.id=$(this).parent().parent().find('.id').val();
			datas.pro=$(this).parent().parent().find('.pro').val();
			datas.explains=$(this).parent().parent().find('.explains').val();
			datas.gid=$("#gid").val();
			var url=rootpath+"/prog/save.shtml";
			$.post(url,datas,function(data){
			 	if(data.status){
			 		obj.parent().parent().find('.id').val(data.data);
			 		layer.msg('保存成功！');
	    		}else{
	    			layer.msg('获取数据失败');
	    		}
			});
		}else{
			var id=$(this).parent().parent().find('.id').val();
			if(id){
				var url=rootpath+"/prog/delete.shtml";
				$.post(url,{"id":id},function(data){
				 	if(data.status){
				 		layer.msg('删除成功！');
				 		obj.parent().parent().remove();
		    		}else{
		    			layer.msg('删除失败');
		    		}
				});
			}else{
				$(this).parent().parent().remove();
			}
		}
	});
	
	$('.upload').click(function(){
		var fileRemarks=$('.fileRemarks').val();
		var xhr = new XMLHttpRequest();
		var fileObj = document.getElementById("fileContainer").files[0]; // 获取文件对象 
		if(!fileObj){
			layer.msg('请选择文件');
			return;
		}
		var formdata = new FormData();
		formdata.append('file', fileObj);
		var pecent = 0, loop = null;
		xhr.open('post', rootpath+'/upload/file.shtml', true);
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				var data = JSON.parse(xhr.responseText);
				var fid=data.data;
				var gmid=$('#gmid').val();
				if(data.status){
					$.post(rootpath+'/prog/saveAcce.shtml',{'remark':fileRemarks,'fid':fid,"gmid":gmid},function(data){
						if(data.status){
							window.location.reload();
						}
					});
				}else{
					layer.msg('上传失败');
				}
			}else{
				layer.msg('上传失败');
			}
		};
		xhr.upload.addEventListener('progress',uploadProgress, false);
		function uploadProgress(evt) {
	        if (evt.lengthComputable) {
	            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
	        }
	    }
		xhr.send(formdata);
	});
	
	function deleteAcce(id){
	$.post(rootpath+'/prog/deleteAcce.shtml',{'id':id},function(data){
		if(data.status){
			layer.msg('删除成功');
			window.location.reload();
		}
	});
	}
</script>
</body>
</html>